<template>
    <a-modal v-model:visible="show"
             :title="titleName"
             :width="1000"
             :maskClosable="false"
             :maskStyle="{ background: 'rgba(179,212,218,0.30)', backdropFilter: 'blur(10px)' }"
             :destroyOnClose="true"
             @ok="handleOk"
             @cancel="cancelModal">
        <a-form :model="formState" :labelCol="{span: 10}" ref="formData">
            <a-row>
                <h2>店铺信息：</h2>
            </a-row>
            <a-row :gutter="0">

                <a-col :span="12">
                    <a-form-item label="店铺名称">
                        <a-input v-model:value="formState.shopEntity.name" disabled style="width: 230px" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="店铺地址">
                        <a-input v-model:value="formState.shopEntity.address" disabled style="width: 230px" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <h2>商品信息：</h2>
            </a-row>
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="订单编号" name="typeId" >
                        <a-input v-model:value="formState.sn" disabled style="width: 230px" />
                    </a-form-item>
                </a-col>

                <a-col :span="12">
                    <a-form-item label="总价">
                        <a-input v-model:value="formState.newMoney" disabled style="width: 230px"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="收货人" name="typeId" >
                        <a-input v-model:value="formState.addressEntity.name" disabled style="width: 230px" />
                    </a-form-item>
                </a-col>

                <a-col :span="12">
                    <a-form-item label="收货人手机号">
                        <a-input v-model:value="formState.addressEntity.phone" disabled style="width: 230px"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="收货地址">
                        <a-input v-model:value="formState.addressEntity.detailAddress" disabled style="width: 230px" />
                    </a-form-item>
                </a-col>

                <a-col :span="12">
                    <a-form-item label="下单时间">
                        <a-input v-model:value="formState.addressEntity.createTime" disabled style="width: 230px"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="24">
                <h2>具体信息：</h2>
            </a-row>
            <div class="goods" v-for="item in formState.orderItemEntities">
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="商品名称">
                            <a-input v-model:value="item.goodsEntity.goodsName" disabled style="width: 230px" />
                        </a-form-item>
                    </a-col>

                    <a-col :span="12">
                        <a-form-item label="商品单价">
                            <a-input v-model:value="item.goodsEntity.presentPrice" disabled style="width: 200px"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="商品数量">
                            <a-input v-model:value="item.num" disabled style="width: 230px" />
                        </a-form-item>
                    </a-col>

                    <a-col :span="12">
                        <a-form-item label="商品图片">
                            <a-image
                                :width="150"
                                :src="item.goodsEntity.goodsPicture"
                                fallback=""
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <hr>
            </div>


        </a-form>
    </a-modal>
</template>

<script>
import {defineComponent, ref, reactive, toRefs, onMounted, computed,watch} from "vue";
import {apiGetTypeList, getImgUrl} from "../../../../api";
import { Moment } from "moment";

export default defineComponent({
    name: "commonModal",
    props: {
        data: {
            type: Object,
            required: true
        },
        visible: {
            type: Boolean,
            required: true,
            default: false
        },
        title: {
            type: String,
            default: "新增菜单"
        },
        typeName: {
            type: String
        }
    },
    setup(props, context) {
        const formData = ref()
        const formState = computed(() => {
            return props.data
        })

        const show = computed(()=> props.visible)
        const titleName = computed(()=> props.title)
        const typeName = computed(() => props.typeName)
        const state = reactive({
            data: {}
        })


        // 点击确定按钮
        const handleOk = () => {
            context.emit('close')
        }

        // 点击取消按钮
        const cancelModal = () => {
            context.emit('close')
        }


        watch(show, () => {
            if (show.value) {
                // 当打开弹框时
                console.log(333333333, formState.value)
                formState.value.orderItemEntities.map(async (item) => {
                    const params = {
                        filename: item.goodsEntity.goodsPicture
                    }
                    const imgData = await getImgUrl(params)
                    const imageUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(imgData.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
                    item.goodsEntity.goodsPicture = imageUrl
                    return item
                })
            }
            console.log(44444444, formState.value)
        })

        // 获取详情

        onMounted(()=> {

        })

        return {
            ...toRefs(state),
            formData,
            formState,
            show,
            titleName,
            handleOk,
            cancelModal,
        }
    }
})
</script>

<style lang="less" scoped>
::v-deep .ant-image-img {
    height: 150px;
}
</style>
